<template>
  <div
    style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center"
  >
    <el-text
      :type="componentProps.type"
      :size="componentProps.size"
      :truncated="componentProps.truncated"
      :line-clamp="componentProps.lineClamp"
      :tag="componentProps.tag"
      :style="getTextStyle()"
    >
      {{ componentProps.text || '文本内容' }}
    </el-text>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted } from 'vue';
import { ElText } from 'element-plus';
import { useAutoDataBinding } from '@/composables/use-data-binding';
import type { IDataBindingConfig } from '@/components/mt-edit/store/types';

const props = defineProps({
  // 数据绑定配置
  dataBinding: {
    type: Object as () => IDataBindingConfig,
    default: () => ({
      enabled: false,
      sourceId: '',
      dataPointId: '',
      targetProperty: 'text',
      transform: 'string',
      defaultValue: '',
      updateInterval: 0
    })
  },
  text: {
    type: String,
    default: '文本内容'
  },
  type: {
    type: String as () => 'primary' | 'success' | 'warning' | 'danger' | 'info',
    default: 'primary'
  },
  size: {
    type: String as () => 'large' | 'default' | 'small',
    default: 'default'
  },
  truncated: {
    type: Boolean,
    default: false
  },
  lineClamp: {
    type: [String, Number],
    default: ''
  },
  tag: {
    type: String,
    default: 'span'
  },
  color: {
    type: String,
    default: ''
  },
  backgroundColor: {
    type: String,
    default: ''
  },
  fontSize: {
    type: String,
    default: ''
  },
  fontWeight: {
    type: String as () =>
      | 'normal'
      | 'bold'
      | 'bolder'
      | 'lighter'
      | '100'
      | '200'
      | '300'
      | '400'
      | '500'
      | '600'
      | '700'
      | '800'
      | '900',
    default: 'normal'
  },
  textAlign: {
    type: String as () => 'left' | 'center' | 'right' | 'justify',
    default: 'left'
  }
});

// 响应式属性对象（用于数据绑定）
const componentProps = ref({
  text: props.text || '文本内容',
  type: props.type || 'primary',
  size: props.size || 'default',
  truncated: props.truncated || false,
  lineClamp: props.lineClamp || '',
  tag: props.tag || 'span',
  color: props.color || '',
  backgroundColor: props.backgroundColor || '',
  fontSize: props.fontSize || '',
  fontWeight: props.fontWeight || 'normal',
  textAlign: props.textAlign || 'left'
});

// 使用数据绑定（hide属性由render-core处理，组件跳过）
const shouldUseDataBinding =
  props.dataBinding && props.dataBinding.enabled && props.dataBinding.targetProperty !== 'hide';

const dataBinding = useAutoDataBinding(
  shouldUseDataBinding ? props.dataBinding : null,
  componentProps.value,
  (property: string, value: any) => {
    // 直接更新响应式对象的属性
    if (componentProps.value.hasOwnProperty(property)) {
      (componentProps.value as any)[property] = value;
    }
  }
);

// 监听props变化，同步到响应式属性对象
watch(
  () => props.text,
  (newValue) => {
    if (!props.dataBinding?.enabled) {
      componentProps.value.text = newValue;
    }
  }
);

watch(
  () => props.type,
  (newValue) => {
    componentProps.value.type = newValue;
  }
);
watch(
  () => props.size,
  (newValue) => {
    componentProps.value.size = newValue;
  }
);
watch(
  () => props.truncated,
  (newValue) => {
    componentProps.value.truncated = newValue;
  }
);
watch(
  () => props.lineClamp,
  (newValue) => {
    componentProps.value.lineClamp = newValue;
  }
);
watch(
  () => props.tag,
  (newValue) => {
    componentProps.value.tag = newValue;
  }
);
watch(
  () => props.color,
  (newValue) => {
    componentProps.value.color = newValue;
  }
);
watch(
  () => props.backgroundColor,
  (newValue) => {
    componentProps.value.backgroundColor = newValue;
  }
);
watch(
  () => props.fontSize,
  (newValue) => {
    componentProps.value.fontSize = newValue;
  }
);
watch(
  () => props.fontWeight,
  (newValue) => {
    componentProps.value.fontWeight = newValue;
  }
);
watch(
  () => props.textAlign,
  (newValue) => {
    componentProps.value.textAlign = newValue;
  }
);

const getTextStyle = () => {
  const style: Record<string, string> = {};

  if (componentProps.value.color) {
    style.color = componentProps.value.color;
  }

  if (componentProps.value.backgroundColor) {
    style.backgroundColor = componentProps.value.backgroundColor;
  }

  if (componentProps.value.fontSize) {
    style.fontSize = componentProps.value.fontSize.includes('px')
      ? componentProps.value.fontSize
      : `${componentProps.value.fontSize}px`;
  }

  if (componentProps.value.fontWeight) {
    style.fontWeight = componentProps.value.fontWeight;
  }

  if (componentProps.value.textAlign) {
    style.textAlign = componentProps.value.textAlign;
  }

  return style;
};
</script>
